const screenAnimates = {
	'.screen-1': [
		'.screen-1-heading',
		'.screen-1__phone',
		'.screen-1__shadow'
	],
	'.screen-2': [
		'.screen-2__heading',
		'.screen-2__subheading',
		'.screen-2__phone',
		'.screen-2__point_i_1',
		'.screen-2__point_i_2',
		'.screen-2__point_i_3'
	],
	'.screen-3': [
		'.screen-3__title', 
		'.screen-3__detail', 
		'.screen-3__phone', 
		'.screen-3__cube', 
		'.screen-3-cube__item'
	],
	'.screen-4':[
		'.screen-4__heading',
		'.screen-4__subheading',
		'.screen-4__type__item_i_1',
		'.screen-4__type__item_i_2',
		'.screen-4__type__item_i_3',
		'.screen-4__type__item_i_4'
	],
	'.screen-5':[
		'.screen-5__heading',
		'.screen-5__subheading',
		'.screen-5__bg'
	]
}

function setScreenAnimate(screenCls) {
	// 获取当前屏幕的元素
	var screen = document.querySelector(screenCls)
	// debugger
	//需要设置动画的元素
	var animateEles = screenAnimates[screenCls]
	// 是否有初始化子元素的样式
	var isSetAnimatesClass = false
	var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？
	screen.onclick = function() {
		if (isSetAnimatesClass === false) {
			for (var i = 0; i < animateEles.length; i++) {
				var ele = document.querySelector(animateEles[i])
				var baseCls = ele.getAttribute('class')
				ele.setAttribute('class', baseCls + ' ' + animateEles[i].substr(1) + '_animate_init')
			}
			isSetAnimatesClass = true
			return
		}
		// 切换init到down
		if (isAnimateDone === false) {
			for (var i = 0; i < animateEles.length; i++) {
				var ele = document.querySelector(animateEles[i])
				var baseCls = ele.getAttribute('class')
				ele.setAttribute('class', baseCls.replace('_animate_init', '_animate_done'))
			}
			isAnimateDone = true
			return
		}
		// 切换done到init
		if (isAnimateDone === true) {
			for (var i = 0; i < animateEles.length; i++) {
				var ele = document.querySelector(animateEles[i])
				var baseCls = ele.getAttribute('class')
				ele.setAttribute('class', baseCls.replace('_animate_done', '_animate_init'))
			}
			isAnimateDone = false
			return
		}
	}
}
for (k in screenAnimates) {
	setScreenAnimate(k);
}
// setScreenAnimate('.screen-1')
